<template >
  <template v-if="profileState===1" class="bg">
    <h4>团支书个人信息
      <el-tooltip :disabled=dataList.disabled class="item" effect="dark" content="系统检测到您是新注册用户，请您点击此处完善个人信息" placement="right" :model-value="true" :manual="true" >
        <i class="el-icon-edit-outline" @click="editProfileFormVisible=true" style="color: red"></i>
      </el-tooltip>
    </h4>
    <el-divider></el-divider>
    <el-scrollbar style="height:300px">
      <el-card>
        <template #header class="name">
          <span>{{ dataList.name }}</span>

        </template>
        <div class="PersonalCardLeft">
          <p class="normal">账号：{{ dataList.account }}</p>
          <p class="normal">学院：{{ dataList.school }}</p>
          <p class="normal">专业：{{ dataList.major }}</p>
          <p class="normal">班级：{{ dataList.mng_class }}</p>
        </div>
      </el-card>
    </el-scrollbar>
  </template>
  <!--  <template v-if="profileState===2"></template>-->

  <el-dialog title="修改个人信息" v-model="editProfileFormVisible" >
    <el-form :model="editProfileForm"  :inline="true" :label-position="labelPosition">
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="editProfileForm.name" autocomplete="off" ></el-input>
      </el-form-item>
      <el-form-item label="学院" :label-width="formLabelWidth" >
        <el-input v-model="editProfileForm.school" autocomplete="off" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="专业" :label-width="formLabelWidth">
        <el-input v-model="editProfileForm.major" autocomplete="off" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="班级" :label-width="formLabelWidth">
        <el-select v-model="editProfileForm.mng_class" placeholder="请选择所属班级">
          <el-option label="B200601" value="B200601"></el-option>
          <el-option label="B200602" value="B200602"></el-option>
          <el-option label="B200603" value="B200603"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="editProfileForm.info" autocomplete="off" ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="editProfileFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="editSubmit">确 定</el-button>
    </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import {getCurrentInstance, reactive, ref, unref} from 'vue'
import {getProfile} from '@/network/student/getProfile'
import {editStudentProfile} from "@/network/student/editStudentProfile";
import {ElMessage} from "element-plus";
import qs from 'qs'
import {getLocalProfile} from "@/network/manager/getLocalProfile";
import {editLocalProfile} from "@/network/manager/editLocalProfile";
export default {
  name: 'Profile',
  data() {
    return {
      editProfileFormVisible : false,
     // disabled: true,
      profileState:1,
    }
  },
  setup(props) {
    const {proxy}:any = getCurrentInstance();
    const ruleFormsss=ref(null)

    const dataList = reactive({
      name: '',
      account: '',
      school: '区块链学院',
      major: '区块链技术与应用',
      mng_class:'',
      info:'',
      disabled:true

    })
    const editProfileForm=reactive({
      name: '',
      account: '',
      school: '',
      major: '',
      mng_class:'',
      info:'',
    })

    const rules = {
      name: [
        { required: true, message: '请输入昵称', trigger: 'blur' },
      ],
      gender: [
        { required: true, message: '请选择性别', trigger: 'blur' },
      ],
      age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
      ],
      info:[
        { required: true, message: '请输入备注', trigger: 'blur' },
      ],
      mng_class:[
        {required:true,message:'请选择班级',trigger:'blur'}
      ]
    }

    // axios请求
    dataList.name = '姓名：' + localStorage.getItem('ManagerName')
    const mid = localStorage.getItem('ManagerId')
    //false 为显示  TRUE为隐藏
   if(localStorage.getItem('TooLPitNoSeen')==='false'){
     dataList.disabled=false
   }
   console.log('disabled:'+dataList.disabled)
    getLocalProfile(mid).then(result => {
      console.log(result.data.result)
      dataList.account = result.data.result[0].account
      dataList.mng_class=result.data.result[0].mng_class
      dataList.info=result.data.result[0].info
      editProfileForm.name=localStorage.getItem('ManagerName')||'[]'
      editProfileForm.school=dataList.school
      editProfileForm.mng_class=dataList.mng_class
      editProfileForm.info=dataList.info
      editProfileForm.major=dataList.major
    }).catch(err => {})

    const editSubmit=async ()=>{
     const form = unref(ruleFormsss);
     //if (!form) {return}
     try {
     //  await (form as any).validate(undefined)
      const editStudentProfileData=qs.stringify(editProfileForm)
      console.log(editStudentProfileData)
      editLocalProfile(mid,editStudentProfileData).then(result=>{
        //前后端连接成功
        console.log("前后端连接成功")
        console.log(result)
        //console.log(id)
        console.log(result.data.status)

        const msg = result.data.msg;
        //打印返回结果状态，
        if (result.data.status === 1) {
          ElMessage.error(msg);
        } else {
          proxy.editProfileFormVisible = false

          console.log(msg)
          ElMessage.success({
            message: msg, type: 'success'
          });
          DynamicDate()
        //  dataList.disabled=true
        }
      }).catch(()=>{
        console.log("no")
        const msg = "修改信息失败！请稍后尝试！";
        ElMessage.error(msg);
      })
     }catch (error) {
      }}

    function DynamicDate(){
      dataList.name='姓名：'+ editProfileForm.name
      dataList.mng_class=editProfileForm.mng_class
      dataList.info=editProfileForm.info
      dataList.disabled=true
    }

    return {
      labelPosition: 'right',
      dataList,
      rules,
      editProfileForm,
      editSubmit,
      DynamicDate


    }




}
}
</script>

<style scoped>
.name {
  font-weight: 1000;
  font-size: 20px;
}

.normal {
  color: #555;
  line-height: 30px;
}
.PersonalCardLeft{
  float: left;
}
.PersonalCardRight{
  float: right;
}
</style>
